<template>
  <div>
    <ul class="container">
      <li v-for="item in showname" v-bind:key="item.goods_id">
        <div class="iii">
          <input type="checkbox" />
          <span v-html="item.shop_name"></span>
          <div class="last">领取优惠券</div>
        </div>

        <div class="iii">
          <input type="checkbox" />
          <div class="box">
            <img v-bind:src="item.icon" alt="" />
            <div class="right">
              <span class="font">{{ item.goods_name }}</span>
              <div class="bottom">
                <span class="price a">¥{{ item.price }}</span>

                <button class="btn a" @click="redece" v-bind:id="item.goods_id">
                  -
                </button>
                <span class="btn lin a" id="mdnym">{{ item.num }}</span>
                <button class="btn a" v-bind:id="item.goods_id" @click="add">
                  +
                </button>
                <Dislog></Dislog>
                <Delelog v-bind:id="item.goods_id" />
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <!-- <router-link ></router-link> -->
  </div>
</template>
<script>
import Dislog from '../Dialog2'
import Delelog from './Dele'
export default {
  data() {
    return {
      name: [],
      numm: [],
    }
  },
  components: {
    Dislog,
    Delelog,
  },
  mounted() {
    this.findname()
  },
  computed: {
    showname() {
      return this.name
    },
  },
  methods: {
    findname() {
      const value = JSON.parse(localStorage.getItem('data'))
      this.name = value
      value.forEach((element) => {
        this.numm.push(element.num)
      })
    },
    add(e) {
      const id = e.target.id
      let sam = Number(e.target.previousSibling.innerText)

      sam = sam + 1
      const value = JSON.parse(localStorage.getItem('data'))
      value.forEach((element) => {
        if (element.goods_id == id) {
          element.num++
        }
      })
      e.target.previousSibling.innerText = sam
      localStorage.setItem('data', JSON.stringify(value))
    },
    redece(e) {
      const id = e.target.id
      let sam = Number(document.querySelector('#mdnym').innerText)
      if (sam > 1) {
        sam = sam - 1
        const value = JSON.parse(localStorage.getItem('data'))
        value.forEach((element, index) => {
          if (element.goods_id == id) {
            element.num--
          }
        })
        document.querySelector('#mdnym').innerText = sam
        localStorage.setItem('data', JSON.stringify(value))
      }
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  li {
    display: flex;
    flex-direction: column;
    .iii {
      font-size: 1.5rem;
      margin: 0px 10px;
      display: flex;
      position: relative;
      align-items: center;
      .box {
        background: #fff;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        img {
          margin-right: 12px;
        }
        .right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .bottom {
            display: flex;
            justify-content: space-between;
            .a {
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .price {
              color: red;
              margin-right: 60px;
            }
            .lin {
              font-size: 1.2rem;
            }
            .btn {
              //   width: 10px;
              //   height: 10px;
              outline: none;
              background-color: #f2f3f5;
              color: #323233;
              border: none;
              padding: 5px;
              margin: 1px;
              border-radius: 0;
              //   display: flex;

              //   justify-content: center;
              //   align-content: center;
            }
          }
          .font {
            font-size: 1.4rem;
            word-break: break-all;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            font-weight: 400;
          }
        }
      }
      .last {
        position: absolute;
        top: 0;
        right: 0;
      }
      img {
        width: 70px;
      }
    }
  }
}
</style>
